<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>QR-Styling-C-3</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      overflow: hidden;
      color: #ffffff;
    }
    .dynamic-background {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      /* https://cssgradient.io/gradient-backgrounds/ */
      /*background: linear-gradient(95deg, #00FF57, #010033, #460043, #FF003C);*/
      background: linear-gradient(110.3deg, rgba(73, 93, 109, 1) 4.3%, rgba(49, 55, 82, 1) 96.7%, rgb(128, 7, 58) 90%);
      /*background: radial-gradient(circle farthest-corner at 83.7% 4.3%, rgba(173, 0, 171, 1) 0%, rgba(15, 51, 92, 1) 90%);*/
      background-size: 400% 400%;
      animation: gradientAnimation 60s ease infinite;
    }
    .dynamic-background::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23FFFFFF' d='M41.9,-72.5C54.1,-67,63.6,-54.9,71.8,-41.8C80,-28.7,86.9,-14.4,88,0.6C89.1,15.7,84.3,31.3,75.5,44.2C66.7,57,53.8,67,39.8,73.3C25.7,79.5,10.4,81.9,-3.8,79.1C-17.9,76.3,-35.8,68.3,-48.3,56.8C-60.8,45.3,-67.9,30.4,-70.5,15.3C-73.1,0.3,-71.1,-14.9,-65.6,-28.1C-60.1,-41.3,-51.1,-52.6,-39.7,-58.4C-28.2,-64.3,-14.1,-64.8,0.5,-65.7C15.1,-66.6,30.2,-67.9,41.9,-72.5Z' transform='translate(100 100)' /%3E%3C/svg%3E");
      background-size: 50% 50%;
      background-repeat: no-repeat;
      background-position: 80% 80%;
      opacity: 0.1;
      animation: blobAnimation 20s ease-in-out infinite alternate;
    }
    @keyframes gradientAnimation {
      0% {
        background-position: 0 50%;
      }
      50% {
        background-position: 100% 50%;
      }
      100% {
        background-position: 0 50%;
      }
    }
    @keyframes blobAnimation {
      0% {
        transform: translate(0, 0) rotate(0deg);
      }
      100% {
        transform: translate(20px, 20px) rotate(360deg);
      }
    }
    .header {
      text-align: center;
      color: #ffffff;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }
    .content {
      display: flex;
      flex: 1;
      margin: 10px;
    }
    .options-left, .options-right, .preview {
      transition: all 0.3s ease;
      background-color: transparent;
      backdrop-filter: none;
    }
    .options-left:hover, .options-right:hover, .preview:hover {
      background-color: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
    }
    .options-left, .options-right {
      width: 100px;
      flex: 2;
      padding: 30px 50px 0;
      border-radius: 10px;
      margin: 0 10px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    .preview {
      flex: 2;
      padding: 10px;
      display: flex;
      flex-direction: column;
      text-align: center;
      justify-content: center;
      align-items: center;
      border-radius: 10px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    .form-group {
      margin-bottom: 10px;
    }
    .qr-optional {
      display: inline-block;
      width: 200px;
    }
    select, input {
      width: 300px;
      background-color: rgba(255, 255, 255, 0.2);
      color: #ffffff;
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: 5px;
      padding: 5px;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg fill='white' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 10px center;
    }
    select:focus, input:focus {
      outline: none;
      border-color: rgba(255, 255, 255, 0.5);
    }
    select option {
      background-color: #2a2a2a;
      color: #ffffff;
    }
    h2, h4 {
      margin-top: 20px;
      margin-bottom: 10px;
      color: #ffffff;
    }
    button {
      margin-top: 10px;
      background-color: rgba(255, 255, 255, 0.2);
      color: white;
      border: none;
      padding: 10px 20px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      margin: 4px 2px;
      cursor: pointer;
      border-radius: 5px;
      transition: background-color 0.3s ease;
    }
    button:hover {
      background-color: rgba(255, 255, 255, 0.3);
    }
    .to-official-demo {
      color: #ffffff;
      text-decoration: underline;
      transition: color 0.3s ease;
    }
    .to-official-demo:hover {
      cursor: pointer;
      color: rgba(255, 255, 255, 0.7);
    }
  </style>
</head>
<body>
<div class="dynamic-background"></div>
<div class='header'><h3>QR Styling Options</h3></div>
<div class='content'>
  <div class="options-left">
  </div>
  <div class="preview">
    <div><p id="qr-data-tip">qr data</p></div>
    <div id="qrcode"></div>
    <div>
      <button id="download">Download</button>
      <label class='download-optional' for="download-type"></label>
      <select id="download-type" style="width: 100px;">
        <option value="png">PNG</option>
        <option value="jpeg">JPEG</option>
        <option value="webp">WebP</option>
        <option value="svg">SVG</option>
      </select>
      <button id="get-raw-data">Get Raw Data</button>
    </div>
    <div><a class="to-official-demo">official-demo</a></div>
  </div>
  <div class="options-right">
  </div>
</div>
</body>
</html>